<template>
  <div>
    <!-- v-pre: 此元素跳过vue编译 -->
    <h1 v-pre>{{ count }}</h1>

    <!-- v-once: 此元素仅编译一次 -->
    <h1 v-once>{{ count }}</h1>
    <button @click="count++">count++</button>

    <!-- v-cloak:用来隐藏尚未编译完成的DOM模板 -->
    <div v-cloak>
      <h1>{{ count }}</h1>
      <h1>{{ count }}</h1>
      <h1>{{ count }}</h1>
    </div>

    <!-- v-memo:用来定义依赖优化v-for -->
    <ul v-memo="[count]">
      <li v-for="user in users">{{ user }}</li>
    </ul>
    <button @click="addUser">王中王</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const count = ref(1);
const users = ref(["刘德华", "黎明", "张学友", "郭富城"]);
const addUser = () => {
  users.value.push("周星驰");
};
</script>

<style  scoped>
[v-clock] {
  display: none;
}
</style>